<template>
    <div class="role-wrapper">
        <el-dialog title="权限分配" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" center @close="cancelClick">
            <div class="dialog-box" v-loading="loading">
                <div class="role-box">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div class="item">
                        <el-checkbox-group v-model="checkedId" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(item,index) in allData" :key="index" :label="item.roleId">{{item.roleName}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="btn-box">
                        <el-button class="btn gray" @click="cancelClick">取消</el-button>
                        <el-button class="btn" type="primary" @click="handleCheckedSure">保存</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default{
    props: ['permissDialog','dataTitle','dataType','dataInfo','staffCodeId'],
    data() {
        return {
            loading: false,
            dialogVisible: false,
            isIndeterminate: false,
            roleId: '',
            checkAll: [],
            checked1: [],
            checkedBox: [],
            allData: [],
            checkedId: []
        }
    },
    methods: {
        handleCheckAllChange(val) {
            if(val) {
                this.allData.forEach((obj) => {
                    this.checkedId.push(obj.roleId)
                })
            } else {
                this.checkedId = []
            }
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.allData.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.allData.length;
        },
        cancelClick() {
            this.dialogVisible = false
            this.$emit('closeClick')
        },
        handleCheckedSure() {
            request({
                url: '/manager/userInfo/userInfoSave.jsp',
                method: 'post',
                data: {
                    txtAction: 'permissions',
                    userId: this.staffCodeId,
                    roleIds: this.checkedId.join(',')
                }
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.dialogVisible = false
                    this.$emit('dialogSaveClick')
                }
            })
        },
        initData() {
            this.loading = true
            request({
                url: '/manager/userInfo/userPermissions.jsp',
                method: 'post',
                data: {
                    staffCode: this.staffCodeId
                }
            }).then(res => {
                if(res.code == 200) {
                    this.loading = false
                    let result = res.data.roleList;
                    let arrId = []
                    for (var i = 0; i < result.length; i++) {
                        if(result[i]['isSelect'] == '1') {
                            arrId.push(result[i].roleId)
                        }
                    }
                    this.isIndeterminate = arrId.length > 0 && arrId.length < result.length
                    this.checkedId = arrId
                    this.allData = res.data.roleList
                }
            })
        }
    },
    watch: {
        permissDialog(newVal, oldVal) {
            this.dialogVisible = newVal
            this.isIndeterminate = false
            this.checkedId = []
            this.allData = []
            this.initData()
        }
    }
}
</script>
<style lang="less" scoped>
.role-wrapper{
    /deep/.role-box{
        width: 100%;
        .title{
            margin: 20px 0;
        }
        .content{
            padding: 0 20px;
        }
        
    }
    .item{
        margin: 20px 0;
        .el-checkbox{
            width: 45%;
            margin: 10px 0;
        }
    }
    .btn-box{
        padding-top: 20px;
        text-align: right;
        border-top: 1px solid #d5d5d5;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
            border: none;
        }
        .gray{
            background: #d5d5d5;
        }
    }
}
</style>